<template>
  <div class="checkingDetails">
    <div class="topBox bg_w border_r8 margin_b8">
      <div class="flex_r_fs_c margin_b24">
        <van-image class="cardImg border_r4 margin_r16" width="3.2rem" height="3.2rem" fit="cover" :src="checkingData.image">
          <template v-slot:loading>
            <van-loading type="spinner" size="2rem" />
          </template>
        </van-image>
        <span class="topName f_16 fw_700" v-text="checkingData.name"></span>
      </div>
      <div class="f_14">
        <div class="topItem margin_b16 flex_r_fs_fs">
          <div class="margin_r20 tc_8">姓名</div>
          <div class="tc_1 fw_700" v-text="checkingData.bookingName"></div>
        </div>
        <div class="topItem margin_b16 flex_r_fs_fs">
          <div class="margin_r20 tc_8">电话</div>
          <!-- <div class="tc_1 fw_700" v-text="checkingData.bookingPhone"></div> -->
          <a class="tc_1 fw_700" :href="'tel:' + checkingData.bookingPhone" v-text="checkingData.bookingPhone" @click.stop></a>
        </div>
        <div class="topItem margin_b32 flex_r_fs_fs">
          <div class="margin_r20 tc_8">随行</div>
          <div v-if="checkingData.peopleNum !== 0" class="tc_1 fw_700" v-text="checkingData.peopleNum + '人'"></div>
        </div>
        <div class="topItem margin_b16 flex_r_fs_fs">
          <div class="margin_r20 tc_8 lineH" style="white-space: nowrap">来访</div>
          <div class="tc_1 fw_700 lineH" v-text="checkingData.serviceItem"></div>
        </div>
        <div class="topItem margin_b16 flex_r_fs_fs">
          <div class="margin_r20 tc_8">时间</div>
          <div class="tc_1 fw_700" v-text="checkingData.time"></div>
        </div>
        <div class="topItem margin_b16 flex_r_fs_fs">
          <div class="margin_r20 tc_8 lineH" style="white-space: nowrap">地址</div>
          <div class="tc_1 fw_700 lineH" v-text="checkingData.address"></div>
        </div>
        <div class="topItem flex_r_fs_fs">
          <div class="margin_r20 tc_8 lineH" style="white-space: nowrap">备注</div>
          <div class="tc_1 fw_700 lineH" v-text="checkingData.other"></div>
        </div>
      </div>
    </div>
    <!-- 待审核 -->
    <div v-if="checkingData.status === 0" class="receiverBox bg_w border_r8 flex_r_sb_c" @click="showReceiver">
      <div class="f_14 tc_1 fw_700 margin_r20 lineH" style="white-space: nowrap">接待人员</div>
      <div class="flex_r_fe_c">
        <span class="f_14 tc_8 lineH">{{ receiver || '请选择接待人员' }}</span>
        <i class="iconfont iconarrowRight f_14 tc_8"></i>
      </div>
    </div>
    <!-- 已审核, 已完成, 超时 -->
    <div v-if="[1, 2, 4].includes(checkingData.status)" class="receiverBox bg_w border_r8 flex_r_fs_fs">
      <div class="f_14 tc_1 fw_700 margin_r20" style="white-space: nowrap">接待人员</div>
      <div class="flex_c_fs_fs">
        <div v-for="(item, index) in assignedPerson" :key="index" class="margin_b12">
          <span class="f_14 tc_1 margin_r8">{{ item.name }}</span>
          <a class="f_14 tc_1" :href="'tel:' + item.mob" v-text="item.mob" @click.stop></a>
        </div>
      </div>
    </div>
    <!-- 待审核 -->
    <div v-if="[0, 1].includes(checkingData.status)" class="bottomBox bg_w border_r8">
      <van-field class="f_14" style="background-color: #eee" v-model="rejectedInput" rows="5" autosize maxlength="200" show-word-limit type="textarea" :placeholder="message" />
    </div>
    <!-- 驳回 -->
    <div v-if="checkingData.status === 3" class="bottomBox bg_w border_r8" style="box-shadow: 0rem 0.2rem 0.8rem rgba(0, 0, 0, 0.1)">
      <van-field class="f_14" style="background-color: #fff" v-model="rejectedInput" rows="5" autosize maxlength="200" readonly type="textarea" :placeholder="message" />
    </div>
    <van-action-sheet v-model="receiverVisible" title="接待人员">
      <div class="receiverContent">
        <div v-for="(item, index) in receiverList" :key="index" class="receiverItem border_r8 f_12" :class="[item.selected ? 'receiverActive' : 'receiverUnactive']" @click="selectReceiver(item, index)">{{ item.name }}</div>
        <van-button class="receiverBtn bg_g tc_w f_16" color="#31A2A3" round block type="info" @click="confirmSelect"> 确定 </van-button>
      </div>
    </van-action-sheet>
    <div v-if="checkingData.status === 0" class="footer bg_w flex_r_sb_c">
      <van-button class="rejectedBtn bg_1 tc_w f_16" color="#111" :disabled="btnDisable" :loading="btnDisable" round block type="info" @click="doRejected"> 驳回 </van-button>
      <van-button class="auditBtn bg_g tc_w f_16" color="#31A2A3" :disabled="btnDisable" :loading="btnDisable" round block type="info" @click="doAudit"> 通过审核 </van-button>
    </div>
    <div v-if="checkingData.status === 1" class="footer bg_w flex_r_sb_c">
      <span class="f_14 tc_8 margin_r16">驳回操作不可逆, 请谨慎操作!</span>
      <van-button class="rejectedBtn bg_1 tc_w f_16" color="#111" :disabled="btnDisable" :loading="btnDisable" round block type="info" @click="doRejected"> 驳回 </van-button>
    </div>
  </div>
</template>

<script>
import audit from '@/api/audit'
export default {
  name: 'checkingDetails',
  data() {
    return {
      id: this.$route.params.id,
      checkingData: {
        id: '1',
        name: '总部-3D试衣间',
        image: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
        time: '2020-11-09 15:00-18:00',
        address: '东方明珠花苑明福楼千誉二楼',
        serviceItem: '参观、洽谈',
        peopleNum: '6人',
        other: '需要会议室、需要茶室需要会议室、需要茶室需要会议室、需要茶室需要会议室、需要茶室需要会议室、需要茶室需要会议室、需要茶室',
        bookingName: '阿布才',
        bookingPhone: '13912128741',
        bookingTime: '09:10:10',
        status: 'checking',
        statusText: '待审核'
      },
      receiver: '请选择接待人员',
      receiverList: [],
      receiverIdList: [],
      receiverVisible: false,
      btnDisable: false,
      message: '驳回原因（通过审核无需填写）',
      rejectedInput: '',
      assignedPerson: []
    }
  },
  filters: {
    auditStatus(e) {
      switch (e) {
        case 0: {
          return '待审核'
        }
        case 1: {
          return '已审核'
        }
        case 2: {
          return '已参加'
        }
        case 3: {
          return '已取消'
        }
        case 4: {
          return '超时参加'
        }
        default: {
          return ''
        }
      }
    }
  },
  methods: {
    getCheckingData() {
      audit.getAuditDetailsById({id: this.id}).then((res) => {
        if (res.code === 1) {
          let resData = {
            id: res.data.join.id,
            name: res.data.venues.name,
            image: res.data.venues.image,
            time: res.data.join.date_text + ' ' + res.data.join.starttime_text + '-' + res.data.join.endtime_text,
            address: res.data.venues.city + res.data.venues.address,
            serviceItem: res.data.server,
            peopleNum: res.data.join.num || 0,
            other: res.data.join.remark,
            bookingName: res.data.join.username,
            bookingPhone: res.data.join.mobile,
            bookingTime: '09:10:10',
            status: res.data.join.status
          }
          this.checkingData = resData
          if (res.data.persons.length > 0) {
            this.assignedPerson = res.data.persons
          }
          if (res.data.join.status === 3) {
            this.rejectedInput = res.data.join.cancel_remark
          }
        } else {
          this.dataError()
        }
      })
    },
    getAuditPerson() {
      audit.getAuditPerson().then((res) => {
        if (res.code === 1) {
          let receiverList = []
          res.data.forEach((item, index) => {
            receiverList.push({
              id: item.id,
              name: item.name,
              mob: item.mob,
              selected: false
            })
          })
          this.receiverList = receiverList
        }
      })
    },
    showReceiver() {
      this.receiverVisible = true
    },
    selectReceiver(e, i) {
      let selected = this.receiverList[i].selected
      this.receiverList[i].selected = !selected
    },
    confirmSelect() {
      let list = []
      let idList = []
      this.receiverList.forEach((item, index) => {
        if (item.selected) {
          list.push(item.name)
          idList.push(item.id)
        }
      })
      this.receiver = list.join(', ')
      this.receiverIdList = idList
      this.receiverVisible = false
    },
    dataError() {
      this.$dialog
        .alert({
          title: '注意',
          message: '网络开小差了呢!',
          confirmButtonText: '返回上一页',
          confirmButtonColor: '#31A2A3'
        })
        .then(() => {
          this.$router.go(-1)
        })
    },
    doRejected() {
      if (this.rejectedInput === '') {
        this.$dialog.alert({
          title: '注意',
          message: '驳回请填写驳回原因!',
          confirmButtonColor: '#31A2A3'
        })
        return false
      }
      let _this = this
      _this.btnDisable = true
      audit.applyAuditById({id: _this.id, type: 0, remark: _this.rejectedInput}).then((res) => {
        if (res.code === 1) {
          this.$toast.success({
            message: '驳回成功!',
            onClose: function () {
              _this.$router.replace({
                path: '/checking'
              })
            }
          })
        }
        _this.btnDisable = false
      })
    },
    doAudit() {
      let _this = this
      if (_this.receiverIdList.length === 0) {
        this.$dialog.alert({
          title: '注意',
          message: '通过审核请选择接待人员!',
          confirmButtonColor: '#31A2A3'
        })
        return false
      }
      let per = _this.receiverIdList.join(',') // 接待人员id字符串

      _this.btnDisable = true
      audit.applyAuditById({id: _this.id, type: 1, per: per}).then((res) => {
        if (res.code === 1) {
          this.$toast.success({
            message: '审核成功!',
            onClose: function () {
              _this.$router.replace({
                path: '/checking'
              })
            }
          })
        }
        _this.btnDisable = false
      })
    }
  },
  mounted() {
    this.id ? this.getCheckingData() : this.dataError()
    this.getAuditPerson()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.checkingDetails {
  padding: 1.2rem 1.4rem;
  box-sizing: border-box;
  .topBox {
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    box-shadow: 0rem 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
    .cardImg {
      overflow: hidden;
    }
  }
  .receiverBox {
    padding: 2.5rem 2rem;
    box-sizing: border-box;
    box-shadow: 0rem 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
    margin-bottom: 2.8rem;
  }
  .bottomBox {
    overflow: hidden;
    margin-bottom: 6rem;
    // box-shadow: 0rem 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
  }
  .receiverContent {
    padding: 2rem;
    box-sizing: border-box;
    .receiverItem {
      display: inline-block;
      height: 4rem;
      line-height: 4rem;
      padding: 0 1.4rem;
      text-align: center;
      // border: 0.1rem solid #111;
      margin: 0 1.2rem 1.2rem 0;
    }
    .receiverBtn {
      margin-top: 2rem;
    }
  }
}
.receiverUnactive {
  background-color: #fff;
  color: #111;
  border: 0.1rem solid #111;
}
.receiverActive {
  background-color: #31a2a3;
  color: #fff;
  border: 0.1rem solid #31a2a3;
}
.footer {
  width: 100%;
  height: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0px -4px 8px rgba(204, 204, 204, 0.15);
  padding: 0rem 1.6rem;
  box-sizing: border-box;
  .rejectedBtn {
    width: 7.2rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 4rem;
  }
  .auditBtn {
    width: 25.7rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 4rem;
    // margin: 1rem auto;
  }
}
.lineH {
  line-height: 2rem;
}
</style>
